<template>
  <div class="dialog-contain">
    <el-row  type="flex" class="row-bg">
      <el-col :span="2">
        <div class="grid-content bg-purple-dark" style="padding-right:10px;line-height:35px;text-align: right">
          <span style="color:#FF0000;padding:0 5px;">*</span>标题:
        </div>
      </el-col>
      <el-col :span="7">
        <div class="grid-content bg-purple-dark">
          <el-input v-model="pageTitle" placeholder="请输入页面名称"></el-input>
        </div>
      </el-col>
      <el-col :span="1">
        <div class="grid-content bg-purple-dark" style="padding-left:10px;line-height:35px;">
          0/30
        </div>
      </el-col>
    </el-row>

    <el-row  type="flex" class="row-bg upload">
      <el-col :span="2">
        <div class="grid-content bg-purple-dark" style="padding-right:10px;line-height:35px;text-align: right">
          封面图:
        </div>
      </el-col>
      <el-col :span="3">
        <div class="grid-content bg-purple-dark">
          <label for="upload" class="upload">点击上传</label>
          <input @change="getFile($event)" type="file" id="upload">
        </div>
      </el-col>
      <el-col :span="4">
        <div class="grid-content bg-purple-dark suggest">
          （建议宽度：750px）
        </div>
      </el-col>
    </el-row>

    <el-row  type="flex" class="row-bg effectImg">
      <el-col :span="2">
        <div class="grid-content bg-purple-dark"></div>
      </el-col>
      <el-col :span="3">
        <div class="grid-content bg-purple-dark">
          <p class="effectImg" ref="pictureCover"></p>
        </div>
      </el-col>
    </el-row>

    <el-row  type="flex" class="row-bg detail">
      <el-col :span="2">
        <div class="grid-content bg-purple-dark" style="padding-right:10px;line-height:35px;text-align: right">
          详情:
        </div>
      </el-col>
      <el-col :span="10">
        <div class="grid-content bg-purple-dark">
          <el-input
            v-model="detail"
            class="textarea"
            type="textarea"
            rows="15"
            placeholder="请输入内容"
            show-word-limit
            resize="none"
          >
          </el-input>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: 'UserDefinedEditor',
  data() {
    return {
      pageName: '',
      pageTitle: '',
      detail: '',
      pictureCover: ''
    }
  },
  methods: {
    getFile(e) {
      const file = e.target.files[0];
      const that = this;
      const reader = new FileReader();
      reader.readAsDataURL(file);
      reader.onload = function() {
        if (/image/.test(this.result)) {
          that.pictureCover = this.result;
          let img = new Image();
          img.src = that.pictureCover;
          img.width = '165';
          img.height = '119';
          img.onload = function() {
            that.$refs.pictureCover.appendChild(img)
          }
        }
      }
    }
  }
}
</script>

<style scoped lang="scss">
.dialog-contain{
  .el-row{
    margin:30px 0;
  }
  .upload{
    .upload{
      display:inline-block;
      width: 110px;
      height: 36px;
      line-height: 36px;
      background-color:#F9F9F9;
      text-align: center;
      border: 1px solid #DDDDDD;
    }
    #upload{
      opacity: 0;
      width:10px;
      height:10px;
      margin-left:-110px;
    }
    .suggest{
      line-height: 36px;
      color:#FF0000;
    }
  }
  .effectImg{
    .effectImg{
      width: 165px;
      height: 119px;
      background-color: #DDDDDD;
    }
  }
  .detail{
    .textarea{
      overflow: auto;
    }
  }
}
</style>
